<template>
    <div>
        <el-dialog :visible.sync="fileVisible.v" v-dialogDrag>
            <div>
                数据类型：
                <el-select
                        v-model="value" style="margin-left: 10px;" clearable placeholder="请选择数据"
                        @change="changeDataFields">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div>
                数据字段：
                <el-select
                        v-model="field" style="margin-left: 10px;margin-top: 20px" multiple clearable
                        placeholder="请选择字段">
                    <el-option
                            v-for="item in fieldOption"
                            :key="item.field"
                            :label="item.fieldName"
                            :value="item.field">
                    </el-option>
                </el-select>
            </div>
            <span>
          <el-button type="primary" style="margin-left: 30px;margin-top: 20px" @click="submit">确定</el-button>
          <el-button type="primary" @click="cancel">取消</el-button>
        </span>
            <!--<v-btn @click="cancel">取消</v-btn>-->
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: "filePosition-Dialog",
        data() {
            return {
                options: [],
                fieldOption: [],
                value: '',
                field: '',
                num: '',
            }
        },
        props: {
            fileVisible: Object,
        },
        methods: {
            showTable() {
                let type = "publicData";
                this.$method.getOptionData(type, this.showTableCallback);
            },
            showTableCallback(res) {
                this.options = res;
            },
            //当数据类型改变时，第二选择框显示当前数据的字段
            changeDataFields(value) {
                this.num = value;
                this.showField();
            },
            showField() {
                if (this.value !== '') {
                    this.fieldOption = this.$method.getField(this.num, this.showFieldCallback);
                }
            },
            showFieldCallback(res) {
                this.fieldOption = res;
            },
            submit() {
                this.fileVisible.v = false;
                //let that=this;
                let fileData = '';
                for (let i = 0; i < this.options.length; i++) {
                    if (this.value == this.options[i].value) {
                        fileData = this.options[i].label;
                    }
                }
                fileData += "," + this.field;
                fileData = fileData.replace(/,/g, "&");
                fileData = fileData.replace(/&/, ",");
                this.$Bus.$emit('fileData', fileData);
                console.log(fileData);
                // this.$axios.post(
                //   '/data/' + this.value+"?select="+this.field+"&"
                // )
                this.value = '';
                this.num = '';
                // this.field='';
            },
            cancel() {
                this.fileVisible.v = false;
                this.value = '';
                this.num = '';
                this.field = '';
            },
        },
        mounted() {
            this.showTable();
            //this.showField();
            //this.resetForm();
            //this.$v.$reset();

        },
        created() {
            this.$Bus.$on('fileVisible.v', (e) => {
                this.fileVisible.v = e;
            })
        },
        // resetForm(formName) {
        //   this.$refs[formName].resetFields();
        // }
        // reset(){
        //   //this.$refs[options].resetFields();
        // }
    }
</script>


<style scoped>

</style>
